/*
 * @Autor: dc
 * @Date: 2022-03-28 16:21:18
 * @LastEditors: dc
 * @LastEditTime: 2022-03-29 15:30:03
 * @Description: 
 */
import React, { Component } from 'react';
import { Link, Route } from "react-router-dom"
import Detail from './Detail'


class News extends Component {
    state = {
        messageArr: [
            { id: '01', title: '消息1' },
            { id: '02', title: '消息2' },
            { id: '03', title: '消息3' }
        ]
    }

    replaceShow = (id,title)=>{
        // 跳转详情 使用replace跳转模式. params参数
        // this.props.history.replace(`/home/news/detail/${id}/${title}`)

        // 跳转详情 使用replace跳转模式. search参数
        // this.props.history.replace(`/home/news/detail?id=${id}&title=${title}`)

         // 跳转详情 使用replace跳转模式. state参数
         this.props.history.replace(`/home/news/detail`,{id,title})
    }
    pushShow = (id,title)=>{
        // 跳转详情 使用push跳转模式 params参数
        // this.props.history.push(`/home/news/detail/${id}/${title}`)

        // 跳转详情 使用push跳转模式 search参数
        // this.props.history.push(`/home/news/detail?id=${id}&title=${title}`)

        // 跳转详情 使用push跳转模式. state参数
        this.props.history.push(`/home/news/detail`,{id,title})
    }

  
    render() {
        const { messageArr } = this.state;
        return (
            <div>
                <ul>
                    {
                        messageArr.map((item) => {
                            return (
                                <li key={item.id}>
                                    {/* 向路由组件传递params参数 */}
                                    {/* <Link to={`/home/news/detail/${item.id}/${item.title}`}>{item.title}</Link> */}

                                    {/* 向路由传递search参数 */}
                                    {/* <Link to={`/home/news/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}

                                    {/* 向路由路由传递state参数 */}
                                    <Link  to={{pathname:'/home/news/detail',state:{id:item.id,title:item.title}}}>{item.title}</Link>

                                    <button onClick={()=>{
                                        this.pushShow(item.id,item.title)
                                    }}>push查看</button>
                                    <button onClick={()=>{
                                        this.replaceShow(item.id,item.title)
                                    }}>replace查看</button>

                                </li>
                            )
                        })
                    }
                </ul>
                {/* 声明接收paramsc参数 */}
                {/* <Route path="/home/news/detail/:id/:title" component={Detail}></Route> */}

                {/* search参数无需声明接收,正常注册路由即可 */}
                {/* <Route path="/home/news/detail" component={Detail}></Route> */}

                {/* state参数无需声明接收,正常注册路由即可 */}
                <Route path="/home/news/detail" component={Detail}></Route>

                
                
            </div>
        )
    }
}

export default (News);